<template>
  <div id="app">
    <Header :add="addTodo"/>
    <List :removeItem="removeItem" :todos="todos"/>
    <Footer/>
  </div>
</template>

<script>
import Header from './components/header';
import List from './components/list';
import Footer from './components/footer';

export default {
  name: 'App',
  components: {
    Header,
    List,
    Footer,
  },
  data() {
    return {
      todos: [],
    };
  },
  watch: {
    todos(val) {
      this.$bus.$emit('getTotal', val.length);
    },
  },
  methods: {
    changeTodo({id}) {
      this.todos = this.todos.reduce((pre,item) => {
        if(item.id === id){
          item.checked = !item.checked
        }
        pre.push(item)
      },[])
    },
    addTodo(todo) {
      if (!todo) return alert('提交失败，不能为空！');
      this.todos = [todo, ...this.todos];
    },
    removeItem(_id) {
      this.todos = this.todos.filter(({id}) => id !== _id);
    },
  },
  mounted() {
    this.$bus.$on('checkTodo', this.changeTodo);
    this.$bus.$on('clearAll', () => {
      this.todos = [];
    });
  },
};
</script>

<style scoped>
#app {
  display: flex;
  flex-direction: column;
}
</style>
